<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
		<style>
			.block {
				border-left: 1px solid black;
				width: 100px;
				height: 50px;
				padding: 50px;
				padding-top: 50px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="block">
				<div>
					<span class="demonstration">有默认值</span>
				</div>
				<div>
					<el-color-picker v-model="color1"></el-color-picker>
				</div>
			</div>
			<div class="block">
				<div>
					<span class="demonstration">无默认值</span>
				</div>
				<div>
					<el-color-picker v-model="color2"></el-color-picker>
				</div>
			</div>
			<hr />

			选择透明度:<br />
			<el-color-picker v-model="color" show-alpha></el-color-picker>
			<hr />

			预定义颜色:<br />
			<el-color-picker v-model="color3" show-alpha :predefine="predefineColors">
			</el-color-picker>
			<hr />
			
			不同尺寸:<br/>
			<el-color-picker v-model="color4"></el-color-picker>
			<el-color-picker v-model="color4" size="medium"></el-color-picker>
			<el-color-picker v-model="color4" size="small"></el-color-picker>
			<el-color-picker v-model="color4" size="mini"></el-color-picker>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				color1: '#409EFF',
				color2: null,
				color: 'rgba(19, 206, 102, 0.8)',
				color3: 'rgba(255, 69, 0, 0.68)',
				predefineColors: [
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577'
				],
				color4: '#409EFF'
			}
		})
	</script>

</html>